<template>
	<div class="box5">
		<div class="top">
			<div class="left">
				<div class="titles">添加</div>
				<p class="shop">商品图片</p>
			</div>
			<el-button type="primary">返回</el-button>
		</div>
		<el-upload
		action="https://jsonplaceholder.typicode.com/posts/"
		list-type="picture-card"
		:on-preview="handlePictureCardPreview"
		:on-remove="handleRemove">
		<i class="el-icon-plus"></i>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
 			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
		<div class="foot">
			<div class="lefts">
				<span><p>商品名称：</p><el-input placeholder="五粮酒"></el-input></span>
				<span><p>商品原价：</p><el-input placeholder="456"></el-input></span>
				<span><p>商品香型：</p><el-input placeholder="浓香型"></el-input></span>
				<span><p>商品度数：</p><el-input placeholder="52°"></el-input></span>
			</div>
			<div class="rights">
				<span><p>库存量：</p><el-input placeholder="368"></el-input></span>
				<span><p>会员价：</p><el-input placeholder="436"></el-input></span>
				<span><p>商品类别：</p><el-input placeholder="普通商品"></el-input></span>
				<span><p>商品品牌：</p><el-input placeholder="五粮液"></el-input></span>
			</div>
		</div>
		<div class="footer-btn">
			<el-button type="primary">确定</el-button>
			<el-button type="info">取消</el-button>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			dialogImageUrl: '',
			dialogVisible: false
		};
	},
	methods: {
		handleRemove(file, fileList) {
			// console.log(file, fileList);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		}
	}
}
</script>
<style lang="less">

.box5{
	width: 85vw;
	height: 92vh;
	position: relative;
	.top{
	width: 100%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.top .left{
	margin-left: 50px;
}
.titles{
	display: block;
	font-size: 25px;
	font-weight: 700;
	color: #333;
	float: left;
	margin-left: 10px;
	height: 80px;
	line-height: 80px;
}
.shop{
	color: #333;
	font-size:18px;
}
.el-button{
	width: 150px;
	height: 50px;
	border-radius: 10px;
	border: none;
	font-size: 20px;
	color: #fff;
	background-color: #4eb1ff;
	margin-right: 50px;
	box-sizing: border-box;
}
.el-upload--picture-card{
	border:2px solid #ccc;
	float: left;
	margin-left: 50px;
	margin-top: 15px;
}
.foot{
	margin-top: 10px;
	height: 350px;
	display: flex;
	position: absolute;
	bottom: 70px;
}
.lefts>span,
.rights>span{
	width:420px;
	display: flex;
	margin-top: 20px;
	margin-left: 50px;
}
.lefts>span>p,
.rights>span>p{
	display: block;
	width: 100px;
	line-height: 40px;
	text-align: left;
}
.footer-btn{
	position: absolute;
	bottom: 50px;
	left:30%;
}
.footer-btn .el-button--info{
	background: #E8E8E8;
	border: none;
	color: #333;
}
}

</style>